{% load static %}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>天天生鲜-注册</title>
	<link rel="stylesheet" type="text/css" href="{% static 'css/reset.css' %}">
	<link rel="stylesheet" type="text/css" href="{% static 'css/main.css' %}">
	<script type="text/javascript" src="{% static 'js/jquery-1.12.4.min.js' %}"></script>
	<script type="text/javascript" src="{% static 'js/register.js' %}"></script>
</head>
<body>
	<div class="register_con">
		<div class="l_con fl">
			<a href="{% url 'hmsx:index' %}" class="reg_logo"><img src="{% static 'img/logo02.png' %}"></a>
			<div class="reg_slogan">足不出户  ·  新鲜每一天</div>
			<div class="reg_banner"></div>
		</div>

		<div class="r_con fr">
			<div class="reg_title clearfix">
				<h1>用户注册</h1>
				<a href="{% url 'hmsx:login' %}">登录</a>
			</div>
			<div class="reg_form clearfix">
				<form action="{% url 'hmsx:reg' %}" method="post" id="f1">
                    {% csrf_token %}
				<ul>
					<li>
						<label>用户名:</label>
						<input type="text" name="user_name" class="required" id="user_name">
						<span class="error_tip" id="error"></span>
					</li>					
					<li>
						<label>密码:</label>
						<input type="password" name="pwd" class="required" id="pwd">
						<span class="error_tip" id="pwd_error"></span>
					</li>
					<li>
						<label>确认密码:</label>
						<input type="password" name="cpwd" class="required" id="cpwd">
						<span class="error_tip" id="cpwd_error"></span>
					</li>
					<li>
						<label>邮箱:</label>
						<input type="text" name="email" class="required" id="email">
						<span class="error_tip" id="email_error"></span>
					</li>
					<li class="agreement">
						<input type="checkbox" name="allow" id="allow" checked="checked">
						<label>同意”天天生鲜用户使用协议“</label>
						<span class="error_tip2" id="all_error"></span>
					</li>
					<li class="reg_sub">
						<input type="submit" value="注 册" id="submit" name="">
                        <span class="error_tip" id="sub"></span>
					</li>
				</ul>				
				</form>
			</div>

		</div>

	</div>

	<div class="footer no-mp">
		<div class="foot_link">
			<a href="#">关于我们</a>
			<span>|</span>
			<a href="#">联系我们</a>
			<span>|</span>
			<a href="#">招聘人才</a>
			<span>|</span>
			<a href="#">友情链接</a>		
		</div>
		<p>CopyRight © 2016 北京天天生鲜信息技术有限公司 All Rights Reserved</p>
		<p>电话：010-****888    京ICP备*******8号</p>
	</div>
    <script type="text/javascript">
        $(function () {

            $('form').submit(function () {
                var isGo = true;
                $("input.required").each(function () {
                    zhi = $(this).val().trim();
                    if (zhi === '' || zhi.length === 0) {
                        $(this).next('.error_tip').css({'display':'block','color': 'red'}).html('该项为必填项');
                        isGo = false;
                    }
                });

                return isGo;
            });

            var submitBtn = document.getElementById("submit");
            submitBtn.onclick = function () {
                if (!document.getElementById("allow").checked) {
                    alert("请核对信息,并勾选按钮!");
                    return false;
                }
            };

            var user_name = $('#user_name');
            user_name.blur(function () {
                if (user_name.val()) {
                    if (!/\w{6,16}/.test(user_name.val())) {
                        $('#error').css({'display':'block','color': 'red'}).html('用户名由6到16位字母、数字、下划线组成')
                    } else if (/\W|_/.test(user_name.val())) {
                        $('#error').css({'display':'block','color': 'red'}).html('用户名不能有特殊字符')
                    } else {
                        $.ajax({
                            url: "{% url 'hmsx:register' %}",
                            type: "post",
                            dataType: "json",
                            data: {
                                user_name: user_name.val(),
                            },
                            success: function (data) {
                                var submitBtn = document.getElementById("submit");
                                var ok = true;
                                if (data.pd === '1') {
                                    $('#error').css({'display':'block','color': 'red'}).html(data['result']);
                                        ok = false
                                } else {
                                    $('#error').css({'display':'block','color': 'green'}).html(data['result']);
                                }
                                submitBtn.onclick = function () {
                                       return ok
                                    }
                            },
                        })
                    }
                } else {
                    $('#error').css({'display':'block','color': 'red'}).html('用户名不可为空')
                }
            });
            user_name.click(function () {
                $('#error').css('display', 'none')
            });

            var pwd = $('#pwd');
            pwd.blur(function () {
                if (pwd.val()) {
                    if (!/.{8,16}/.test(pwd.val())) {
                        $('#pwd_error').css({'display':'block','color': 'red'}).html('密码长度必须为8到16位')
                    }
                } else {
                    $('#pwd_error').css({'display':'block','color': 'red'}).html('密码不可为空')
                }
            });
            pwd.keyup(function () {
                var pattern1 = /([0-9]+)/;
                var pattern2 = /([a-z]+)/;
                var pattern3 = /([A-Z]+)/;
                if(pattern1.exec(pwd.val()) && pattern2.exec(pwd.val()) && pattern3.exec(pwd.val())){
                    $('#pwd_error').css({'display':'block','color': '#33CC00'}).html('密码强度：★★★★★ 强')
                } else if(pattern1.exec(pwd.val()) && pattern2.exec(pwd.val())){
                    $('#pwd_error').css({'display':'block','color': 'blue'}).html('密码强度：★★★☆☆ 中')
                } else if(pattern1.exec(pwd.val()) && pattern3.exec(pwd.val())){
                    $('#pwd_error').css({'display':'block','color': 'blue'}).html('密码强度：★★★☆☆ 中')
                } else if(pattern2.exec(pwd.val()) && pattern3.exec(pwd.val())){
                    $('#pwd_error').css({'display':'block','color': 'blue'}).html('密码强度：★★★☆☆ 中')
                } else if(pattern1.exec(pwd.val())){
                    $('#pwd_error').css({'display':'block','color': '#FF9900'}).html('密码强度：★☆☆☆☆ 弱')
                } else if(pattern2.exec(pwd.val())){
                    $('#pwd_error').css({'display':'block','color': '#FF9900'}).html('密码强度：★☆☆☆☆ 弱')
                } else if(pattern3.exec(pwd.val())){
                    $('#pwd_error').css({'display':'block','color': '#FF9900'}).html('密码强度：★☆☆☆☆ 弱')
                }
            });
            pwd.click(function () {
                $('#pwd_error').css('display', 'none')
            });

            var cpwd = $('#cpwd');
            cpwd.blur(function () {
                if (cpwd.val() === pwd.val()) {
                    $('#cpwd_error').html('')
                } else {
                    $('#cpwd_error').css('display', 'block').html('两次密码不一致')
                }
            });
            cpwd.click(function () {
                $('#cpwd_error').css('display', 'none')
            });

            var email = $('#email');
            email.blur(function () {
                if (email.val()) {
                    if (!/^[a-z0-9][\w\.\-]*@[a-z0-9\-]+(\.[a-z]{2,5}){1,2}$/.test(email.val())) {
                        $('#email_error').css({'display':'block','color': 'red'}).html('邮箱格式不正确')
                    } else {
                        $.ajax({
                            url: "{% url 'hmsx:register' %}",
                            type: "post",
                            dataType: "json",
                            data: {
                                email: email.val(),
                            },
                            success: function (data) {
                                var submitBtn = document.getElementById("submit");
                                var aaa = true;
                                if (data.pd === '1') {
                                    $('#email_error').css({'display':'block','color': 'red'}).html(data['result1']);
                                    aaa = false
                                } else {
                                    $('#email_error').css({'display':'block','color': 'green'}).html(data['result1']);
                                }
                                submitBtn.onclick = function () {
                                       return aaa
                                    }
                            },
                        })
                    }
                } else {
                    $('#email_error').css({'display':'block','color': 'red'}).html('邮箱不可为空')
                }
            });
            email.click(function () {
                $('#email_error').css('display', 'none')
            });

        })
    </script>
</body>
</html>